<template>
  <div class="app-container">
    <el-card>
      <TitleLine title="基本信息" />
      <!-- 表单 start -->
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="关键词名" prop="name">
          <el-input
            v-model="formData.name"
            placeholder="请输入关键词名"
            :maxlength="20"
            clearable
            :style="{ width: '40%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="显示顺序" prop="sort">
          <el-input
            v-model.number="formData.sort"
            placeholder="请输入关键词显示顺序"
            :maxlength="4"
            clearable
            :style="{ width: '40%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="显示平台" prop="platform">
          <el-checkbox-group v-model="formData.platform" size="medium">
            <el-checkbox
              v-for="(item, index) in showPlatformOptions"
              :key="index"
              :label="item.value"
              :disabled="item.disabled"
              >{{ item.label }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <!-- 表单 end -->
    </el-card>

    <!-- 底部操作栏 -->
    <div class="flex justify-center mt-20">
      <el-button size="medium" @click="cancle">取消</el-button>
      <el-button size="medium" type="primary" @click="confirm">确定</el-button>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  name: 'AddKeywords',
  components: {},
  props: {},
  data() {
    return {
      // 表单
      formData: {
        name: '',
        sort: '',
        platform: [],
        isOpen: true
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入关键词名',
            trigger: 'blur'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入关键词显示顺序',
            trigger: 'blur'
          },
          { type: 'number', message: '排序必须为数字值', trigger: ['change', 'blur'] },
          { pattern: /^[1-9]\d*$/, message: '请输入大于0的整数', trigger: ['change', 'blur'] }
        ],
        platform: [
          {
            required: true,
            type: 'array',
            message: '请至少选择一个平台',
            trigger: 'change'
          }
        ]
      },
      showPlatformOptions: [
        {
          label: '好物特工',
          value: '2'
        }
        // {
        //   label: '酒馆长',
        //   value: '4'
        // }
        // {
        //   label: '挖咖',
        //   value: '8'
        // },
        // {
        //   label: '机咖',
        //   value: '16'
        // }
      ],
      isOpenOptions: [
        {
          label: '启用',
          value: true
        },
        {
          label: '隐藏',
          value: false
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {
    // 查询关键字详情
    this.getKeywordsInfo()
  },
  mounted() {},
  methods: {
    // 查询关键字详情
    async getKeywordsInfo() {
      const id = this.$route.query.id
      if (!id) return
      try {
        const { data } = await this.$http.goods.keywords.getById({ params: { id } })
        this.formData = { ...data, platform: data.platform.split(',').filter(el => el) }
      } catch (error) {
        console.log('getKeywordsInfo', error)
      }
    },

    // 点击取消
    cancle() {
      this.$router.back()
    },

    // 点击确定
    confirm: _.debounce(function () {
      this.$refs.elForm.validate(valid => {
        if (!valid) return
        // 参数整合
        const params = this.$lodash.cloneDeep(this.formData)
        const api = params.id ? 'update' : 'save'
        const tip = params.id ? '编辑成功' : '新增成功'
        params.platform = params.platform.join(',')
        // 发送请求
        this.$http.goods[api](params)
          .then(res => {
            if (res.status === 200) {
              this.$message.success(tip)
              this.$router.back()
            } else {
              this.$message.error(res.msg)
            }
          })
          .catch(err => {
            console.log('confirm', err)
          })
      })
    }, 400)
  }
}
</script>

<style lang="scss" scoped></style>
